import React, { useCallback, useEffect, useMemo, useState } from 'react'
import { ExclamationCircleOutlined, SearchOutlined } from '@ant-design/icons'
import { Button, Space, Table, Modal, message } from 'antd'
import Bread from '@/component/bread/bread'
import PicModal from './uploadPicture'
import axios from '@/http'
import { TPic } from '@/Type/type'
import { ColumnsType } from 'antd/lib/table'
const { confirm } = Modal

type TSearchPic = TPic & { id: number }
const Pictrue = () => {
  const [pageSize, setPageSize] = useState<number>(10)
  const [pageNum, setPageNum] = useState<number>(0)
  useEffect(() => {
    getPicList()
  }, [pageNum, pageSize])
  const [open, setOpen] = useState<boolean>(false)
  const [picList, setPicList] = useState<TSearchPic[]>([])
  const [total, setTotal] = useState<number>(0)

  const showModal = () => {
    setOpen(true)
  }
  const closeModal = (state: boolean) => {
    setOpen(state)
  }
  const getPicList = () => {
    axios
      .get('/pic/search', {
        params: {
          pageNum,
          pageSize
        }
      })
      .then(res => {
        setPicList(res.data.data.recordList)
        setTotal(res.data.data.total)
      })
  }
  const columns: ColumnsType<TSearchPic> = [
    { title: 'Id', dataIndex: 'id', key: 'id', width: '80px' },
    {
      title: 'url',
      dataIndex: 'url',
      key: 'url',
      width: '60%',
      render: (_, data) => {
        return (
          <a href={data.url} target={'_blank'} style={{ width: '100px' }} rel="noreferrer">
            {data.url}
          </a>
        )
      }
    },
    {
      title: '图片展示',
      dataIndex: 'show',
      key: 'show',
      render: (_, data) => {
        return <img src={data.url} alt="图片" style={{ width: '100px' }} />
      }
    },
    {
      title: '操作',
      dataIndex: '',
      key: 'x',
      width: '10%',
      render: (_, data) => {
        const { id, url } = data
        return (
          <Space size="middle">
            <a onClick={() => showEditConfirm(id)}>编辑</a>
            <a onClick={() => showDeleteConfirm(id, url)} style={{ color: 'red' }}>
              删除
            </a>
          </Space>
        )
      }
    }
  ]
  const pageChange = (pageNum: number, pageSize: number) => {
    setPageNum(pageNum)
    setPageSize(pageSize)
  }
  const showEditConfirm = (id: number) => {}
  const showDeleteConfirm = (id: number, url: string) => {
    confirm({
      title: '删除博客?',
      icon: <ExclamationCircleOutlined />,
      content: '你确定要删除该图片？',
      okText: '确定',
      okType: 'danger',
      cancelText: '取消',
      onOk() {
        startDel(id, url)
      }
    })
  }
  const startDel = (id: number, url: string) => {
    axios
      .post('/pic/del', {
        id,
        url
      })
      .then(res => {
        if (res.data.error === -1) {
          getPicList()
          message.success('删除成功')
        } else {
          message.error('删除失败')
        }
      })
  }
  return (
    <>
      <Bread bread={['图库', '图库管理']}></Bread>
      <PicModal open={open} closeModal={closeModal} getPicList={getPicList}></PicModal>
      <Button onClick={showModal} style={{ marginBottom: '8px' }}>
        图片上传
      </Button>
      <Table
        rowKey={record => record.id}
        columns={columns}
        scroll={{ y: 450 }}
        dataSource={picList}
        pagination={{ position: ['bottomCenter'], total, showSizeChanger: true, onChange: pageChange }}
      />
    </>
  )
}
export default Pictrue
